<template>
    <!-- 三表的表头 -->
    <div class="header w100 ">
        <!-- <div></div> -->

        <ul class="header2 df">
            <div class="d-center">时间范围:</div>
            <li class="f1 d-center" v-for="(item, index) in timeScope" :key="item"
                :class="timeActive == index ? 'time-active' : ''" @click="timeClick(index)">{{
                        item
                }}</li>
        </ul>
        <ul class="header3 df">
            <li class="f1" v-for="(item, index) in contentScope" :key="item"
                :class="timeActive2 == index ? 'time-active' : ''" @click="timeClick2(index)">{{
                        item
                }}</li>
        </ul>
        <div class="header4">
            单位:
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label + '万元'" :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>

</template>

<script>
export default {
    name: '',
    components: {},
    data() {
        return {
            options: [{
                value: '选项1',
                label: '年报  最新'
            }, {
                value: '选项2',
                label: '月报  最新'
            }, {
                value: '选项3',
                label: '日报  最新'
            },],
            value: '',
            timeScope: ['3Y', '5Y', '10Y', '20Y'],
            contentScope: ['原始报表', '图形分析', '销售百分比', '资产百分比', '同比增长率'],
            timeActive: 0,
            timeActive2: 0,
        }
    },
    created() { },
    mounted() { },
    methods: {
        timeClick(index) {
            this.timeActive = index
        },
        timeClick2(index) {
            this.timeActive2 = index
        }
    }
}
</script>
<style scoped lang='scss'>
@import '../assets/sass/index.scss';

.header {
    display: flex;
    height: 40px;
    width: 100%;
    align-items: center;
    background-color: #fff;
    border: 10px solid #e9f0ff;
    height: 70px;
    box-sizing: border-box;
    cursor: pointer;
    padding-left: 30px;

    .header1 {
        width: 16%;

    }

    .header2 {

        // width: 15%;
        li {
            padding: 0 13px;
            text-align: center;
            border: 1px solid #cfcfcf;
            width: 50px;
        }
    }

    .header3 {
        // width: 35%;
        margin-left: 40px;

        li {
            // padding: 0 18px;
            width: 98px;
            border: 1px solid #cfcfcf;
            text-align: center;
            margin-left: 0.5px;
            border-radius: 3px;
        }
    }

    .header4 {
        width: 20%;
        margin-left: 30px;
    }
}

.time-active {
    background-color: #004dff;
    color: #fff;
    border: 0;
}

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
</style>


<style>
.el-input__inner {
    height: 29px;
    line-height: 29px;
}

.el-input__icon {
    line-height: 29px !important;
}
</style>
